<script>
import request from "@/utils/request"
import { getShowImage } from "@/utils"
import Empty from "@/components/empty.vue"
import shareInfo from "@/utils/shareInfo"
import { getSysParam } from "@/utils"
import banner from "@/components/banner.vue"
import websocket from "@/utils/websocket"
import studyRoomFloat from "@/components/studyRoomFloat/index.vue"
import customTabbar from "@/components/customTabbar/index.vue"

export default {
  name: "list",
  components: { Empty, banner, studyRoomFloat, customTabbar },
  methods: {
    getShowImage,
    //获取课程列表
    getCourseList() {
      this.loadMoreStatusText = "loading"
      request({
        url: "courseClass/getCourseClassPage",
        data: {
          ...this.pagination,
          ...this.searchForm,
          businessType: this.businessType,
        },
        errorHandle: true,
      })
        .then((data) => {
          if (data.total === 0) {
            this.noData = true
            return
          }
          this.courseList.push(...data.records)
          if (this.courseList.length >= data.total) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
        })
        .catch(() => {
          this.loadMoreStatusText = "more"
        })
    },
    //获取课程详情
    async getCourseDetail() {
      const res = await request({
        url: "courseClass/getDetailsById",
        data: {
          id: this.lastOpenCourseId,
        },
        showLoading: true,
        errorHandle: true,
      })
      for (let courseListElement of this.courseList) {
        if (courseListElement.id === this.lastOpenCourseId) {
          for (let courseListElementKey in courseListElement) {
            courseListElement[courseListElementKey] = res[courseListElementKey]
          }
          break
        }
      }
    },
    //重置分页并重新获取课程列表
    resetPaginationAndRefreshList() {
      this.pagination.current = 1
      this.courseList = []
      this.noData = false
      this.getCourseList()
    },
    //课程点击
    async courseItemClick(item) {
      this.lastOpenCourseId = item.id
      uni.navigateTo({ url: "/pages/course/detail?id=" + item.id })
    },
  },
  data() {
    return {
      examList: [],
      courseTypeList: [],
      pagination: {
        current: 1,
        size: 10,
      },
      searchForm: {
        typeCode: "", //课程分类
        examId: "", //考试id
      },
      noData: false,
      loadMoreStatusText: "more",
      courseList: [],
      openPage: true, //是否开启课程板块
      firstTimeOpenPage: true, //是否是首次打开这个页面
      lastOpenCourseId: "", //上次打开查看详情的课程id
      businessType: "", // 业务类型 Racked 带背词库
    }
  },
  async onLoad(query) {
    this.businessType = query.businessType
    //检查是否开启了课程板块
    this.openPage = (await getSysParam("openCoursePage")) !== "否"
  },
  async onShow() {
    websocket.trackCurrentPage("课程列表").catch(() => {})
    //如果是从详情页返回回来，则对上次打开的课程进行刷新
    if (this.lastOpenCourseId) {
      await this.getCourseDetail()
      this.lastOpenCourseId = ""
      return
    }
    await Promise.all([
      //获取考试列表
      request({
        url: "exam/getAllExam",
        showLoading: true,
        errorHandle: true,
      }).then(async (data) => {
        data.unshift({ examId: "", examName: "不限" })
        this.examList = data
      }),
      //获取课程班型类型列表
      request({
        url: "courseClass/listCourseType",
        showLoading: true,
        errorHandle: true,
      }).then((data) => {
        data.unshift({ typeCode: "", typeName: "全部" })
        this.courseTypeList = data
      }),
    ])
    //获取课程列表
    this.resetPaginationAndRefreshList()
  },
  //页面到达底部的时候自动加载下一页
  onReachBottom() {
    if (this.noData || this.loadMoreStatusText === "noMore" || this.loadMoreStatusText === "loading") {
      return
    }
    this.pagination.current++
    this.getCourseList()
  },
  //配置右上角分享
  async onShareAppMessage() {
    return await shareInfo.getDefaultShareInfo()
  },
}
</script>

<template>
  <view class="page" v-if="openPage">
    <!--		轮播图-->
    <banner :position="3" height="320rpx"></banner>
    <view class="classify">
      <!--		考试选择-->
      <view class="exam-selection item">
        <view
          class="exam-item"
          v-for="item in examList"
          :key="item.examId"
          :class="{ active: searchForm.examId === item.examId }"
          @click="
            () => {
              searchForm.examId = item.examId
              resetPaginationAndRefreshList()
            }
          "
        >
          <text>{{ item.examName }}</text>
          <view class="underline" v-if="searchForm.examId === item.examId"></view>
        </view>
      </view>
      <!--			课程分类-->
      <view class="exam-classify item">
        <view
          class="exam-classify-item"
          :class="{ active: searchForm.typeCode === item.typeCode }"
          v-for="item in courseTypeList"
          :key="item.typeCode"
          @click="
            () => {
              searchForm.typeCode = item.typeCode
              resetPaginationAndRefreshList()
            }
          "
          >{{ item.typeName }}</view
        >
      </view>
    </view>
    <!--		课程列表-->
    <view class="course-list" v-if="!noData">
      <view class="course-item" v-for="item in courseList" @click="courseItemClick(item)" :key="item.id">
        <image class="banner" :src="getShowImage(item.topCarouselList[0])"></image>
        <view class="content">
          <view class="name">
            <text class="text">{{ item.className }}</text>
            <!--						已购买且商品金额大于0时才展示-->
            <text class="text" style="color: var(--text-color-light)" v-if="item.isRegistered === 1 && item.price > 0">\t(已购买)</text>
          </view>
          <view class="tag-list row">
            <view class="tag-item" v-for="tag in item.tagsList" :key="tag">{{ tag }}</view>
            <!--						<view class="team-buying-tag tag-item">可拼团</view>-->
          </view>
          <view class="footer">
            <view class="view-detail-btn">
              <text>查看详情</text>
              <text>{{ " >" }}</text>
            </view>
          </view>
        </view>
      </view>
      <view style="display: flex; width: 100%; justify-content: center">
        <uni-load-more :status="loadMoreStatusText"></uni-load-more>
      </view>
    </view>
    <empty v-else height="calc(100vh - 472rpx)" />

    <studyRoomFloat></studyRoomFloat>
    <customTabbar></customTabbar>
  </view>
</template>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: #fffaf5;
  padding-bottom: calc(122rpx + env(safe-area-inset-bottom));
  .classify {
    background: white;
    padding: 20rpx 0;
    .item {
      display: flex;
      flex-wrap: nowrap;
      width: 100vw;
      overflow-y: auto;
    }
    .exam-selection {
      padding-bottom: 30rpx;
      .exam-item {
        margin-left: 40rpx;
        font-size: 32rpx;
        position: relative;
        min-width: max-content;
        &.active {
          font-weight: bold;
        }
        .underline {
          position: absolute;
          bottom: -16rpx;
          left: 50%;
          transform: translateX(-50%);
          height: 8rpx;
          width: 40rpx;
          border-radius: 4rpx;
          background: var(--theme-color);
        }
      }
    }
    .exam-classify {
      .exam-classify-item {
        height: 60rpx;
        border-radius: 30rpx;
        margin-left: 16rpx;
        padding: 0 20rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        background: var(--gray-background-color);
        min-width: max-content;
        &.active {
          background: var(--theme-color);
          color: var(--text-color-white);
        }
      }
    }
  }
  .course-list {
    padding: 24rpx;
    display: flex;
    flex-wrap: wrap;
    .course-item {
      border-radius: 20rpx;
      background: white;
      margin-bottom: 24rpx;
      width: calc(50% - 13rpx);
      overflow: hidden;
      height: max-content;
      &:nth-child(odd) {
        margin-right: 24rpx;
      }
      .banner {
        width: 100%;
        height: 220rpx;
      }
      .content {
        padding: {
          left: 18rpx;
          right: 18rpx;
          bottom: 18rpx;
        }
        .name {
          margin-top: 14rpx;
          font-size: 30rpx;
          font-weight: 500;
          .text {
            text-overflow: ellipsis;
            word-wrap: break-word;
            display: block;
          }
        }
        .tag-list {
          margin-top: 18rpx;
          display: flex;
          flex-wrap: wrap;
          .tag-item {
            margin-right: 16rpx;
            font-size: 26rpx;
            color: var(--text-color-theme);
            margin-bottom: 18rpx;
            &.team-buying-tag {
              color: #e83030;
            }
          }
        }
        .footer {
          .view-detail-btn {
            width: 100%;
            height: 48rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff4cc;
            font-size: 26rpx;
            color: #a77e00;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
          }
        }
      }
    }
  }
}
</style>
